<template>
  <el-icon>
    <HomeFilled/>
  </el-icon>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(item,index) in breadcrumbList" :key="index">
      <span class="root" v-if="parentName!=undefined && index>0">{{parentName }}&nbsp;&nbsp;/&nbsp;&nbsp;</span>
      <span class="leaf" v-if="index==breadcrumbList.length-1">{{ item.name }}</span>
      <span class="root" v-else>{{ item.name }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>

</template>

<script lang="ts" setup>
import {Ref, ref, watch} from 'vue'
import {HomeFilled} from '@element-plus/icons-vue'
import {RouteLocationMatched, useRoute} from 'vue-router'
import store from "@/store";

const route = useRoute();
const breadcrumbList: Ref<RouteLocationMatched[]> = ref([]);
const parentName: any = ref("")
const initBreadcrumbList = () => {
  breadcrumbList.value = route.matched;
  parentName.value = route.meta.parentName;
}
watch(route, () => {
  initBreadcrumbList();
  console.log(route.matched)
  console.log(route.meta.parentName)
}, {deep: true, immediate: true})
</script>

<style lang="scss" scoped>

</style>